<template>
  <el-dialog 
  v-model="dialogFormVisible" 
  title="添加物资信息" 
  top="30px"
  :close-on-click-modal="false"
  width="460px">
  <div class="form-style">
        <el-form ref="addForm" :model="form">
            <el-form-item label="名字" prop="materialName" style="width: 200px;">
                <el-input v-model="form.materialName" />
            </el-form-item> 
            <el-form-item label="数量" prop="number" style="width: 150px;">
                <el-input v-model="form.number" />
            </el-form-item>
            <el-form-item label="单位" prop="unit" style="width: 150px;">
                <el-input v-model="form.unit"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <div style="width: 320px;">
                    <el-input
                    v-model="form.remark"
                    maxlength="40"
                    :rows="4"
                    show-word-limit
                    type="textarea"
                    />
                </div>
            </el-form-item>
            
        </el-form>
    </div>  
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="clear"> 清空</el-button>
        <el-button type="primary" @click="submitAddInfo">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

    export default {
        data() {
        return {
            dialogFormVisible: false,
            form: {
                materialName:'',
                number:'',
                unit:'',
                remark:'',
            },
            creator:'',
        };
        },
        methods: {
            //显示对话框
            dialogShow(){
                this.dialogFormVisible=true;
            },
         
            //提交添加信息
            submitAddInfo(){
				var that=this;
				let params = {
				materialName:this.form.materialName,
				number:parseInt(this.form.number),
				unit:this.form.unit,
				remark:this.form.remark
				};
				this.axios
				.post("/material/add", params)
				.then(function () {
					that.$emit("updateData");
                    that.clear();
                    that.dialogFormVisible=false;
				})
				.catch(function (error) {
                    console.log(error)
				});
            },
            //清空表单
            clear(){
                this.$refs['addForm'].resetFields();
            },

        }
    };
</script>
<style scoped>
.form-style{
    margin-left: 30px;
}
</style>
